<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

    <script>
       var flag = true; 
        var addflag=false;
        var motifyflag=false; 
    </script>

    <div class="a" style="padding: 10px;"> 
        <button id="add" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">增加</button>
        <button id="delete" class="btn btn-primary">删除</button>
        <button id="motify" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">修改</button>
        <button id="find" class="btn btn-primary">查询</button> <input type="text" id="a" placeholder="按工号查询"><input type="text" id="b" placeholder="按姓名查询">
       
    </div> 

    <table class="table table-bordered" id="table1"> 
        <thead> 
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr> 
        </thead>
        <tbody> 
            <tr class="info"> 
                <td><input type="checkbox" name="test"></td>
                <td id="xuhao">1001</td> 
                <td>张三</td> 
                <td>女</td>
                <td>1234</td> 
                <td>29</td> 
                <td>1991-1-1</td> 
            </tr> 
            <tr class="warning"> 
                <td><input type="checkbox" name="test"></td>
                <td id="xuhao">1002</td> 
                <td>李四</td> 
                <td>男</td>
                <td>1234</td> 
                <td>28</td> 
                <td>1992-2-2</td> 
            </tr> 
            <tr class="info">
                <td><input type="checkbox" name="test"></td>
                <td id="xuhao">1003</td> 
                <td>王五</td> 
                <td>女</td>
                <td>1234</td> 
                <td>27</td> 
                <td>1993-3-3</td> 
            </tr> 
            <tr class="warning" id="frist"> 
                <td><input type="checkbox" name="test"></td>
                <td id="xuhao">1004</td> 
                <td>赵六</td> 
                <td>女</td>
                <td>1234</td> 
                <td>26</td> 
                <td>1994-4-4</td> 
            </tr> 
        </tbody>
        
    </table>

    <!-- <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button> -->
    <div class="modal" id="myModal1" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入增添人员信息</h4>
                </div>
                <div style="padding: 10px;">
                    <p>工号：<input type="text"id="num"></p>
                    <p>姓名：<input type="text" id="name"></p>
                    <p>性别：<input type="text"id="sex"></p>
                    <p>密码：<input type="text"id="password"></p>
                    <p>年龄：<input type="text" id="age"></p>
                    <p>生日：<input type="text" id="borndate"></p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" id="sure1">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消 </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入修改人员信息</h4>
                </div>
                <div style="padding: 10px;">
                    <p>工号：<input type="text"id="num1"></p>
                    <p>姓名：<input type="text" id="name1"></p>
                    <p>性别：<input type="text"id="sex1"></p>
                    <p>密码：<input type="text"id="password1"></p>
                    <p>年龄：<input type="text" id="age1"></p>
                    <p>生日：<input type="text" id="borndate1"></p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" id="sure2">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消 </button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>

   <script>
        $("#sure1").click(function(){
            var num = $("#num").val();
            var name = $("#name").val();  
            var sex = $("#sex").val();
            var password = $("#password").val();
            var age = $("#age").val();
            var borndate = $("#borndate").val();
            
            var all=`<tr class=${(flag?"info":"warning")}>
                <td><input type="checkbox" name="test"></td> 
                <td id="xuhao">${num}</td> 
                <td>${name}</td> 
                <td>${sex}</td>
                <td>${password}</td> 
                <td>${age}</td> 
                <td>${borndate}</td> 
                </tr>`;
            var info=$(all);  
            info.appendTo("tbody");
            flag=!flag;
        });   
        $("#sure2").click(function(){
            var num = $("#num1").val();
            var name = $("#name1").val();  
            var sex = $("#sex1").val();
            var password = $("#password1").val();
            var age = $("#age1").val();
            var borndate = $("#borndate1").val();
            
            var all=`<tr class=${(flag?"info":"warning")}>
                <td><input type="checkbox" name="test"></td> 
                <td id="xuhao">${num}</td> 
                <td>${name}</td> 
                <td>${sex}</td>
                <td>${password}</td> 
                <td>${age}</td> 
                <td>${borndate}</td> 
                </tr>`;
            var info=$(all);  
            $("input[name='test']:checked").each(function() { 
            n = $(this).parents("tr").index();  
            $("#table1").find("tr:eq("+(n+1)+")").replaceWith(info);
            });
            flag=!flag;
        }); 

        $("#delete").click(function() {
            $("input[name='test']:checked").each(function() { 
            n = $(this).parents("tr").index();  
            $("#table1").find("tr:eq("+(n+1)+")").remove();
            });
        });
            $('#find').click(function() {
            var a=$('#a').val();
            var b=$('#b').val();
            if(""!=a){
                $('table tbody tr').hide().filter(":contains('" + a + "')").show();
            }
            else if(""!=b){
                $('table tbody tr').hide().filter(":contains('" + b + "')").show();
            }else{
                $('table tbody tr').show();
            }
        });

    </script>
    <script src="js/jquery-3.3.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    
</body>
</html>